<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">更换手机号</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>

		<view class="form">
			<view class="step1" v-if="stepIndex == 1">
				<image src="../../static/user/checkPhone1.png" mode="widthFix"></image>
				<text>当前绑定的手机号</text>
				<view>{{uerInfo.mobile | setPhone}}</view>
				<text>手机号可用于登录和密码找回</text>
			</view>

			<view class="step2" v-if="stepIndex == 2">
				<text>核验手机号</text>
				<view class="phone">{{uerInfo.mobile | setPhone}}</view>
				<view class="formInput imgCode">
					<view class="label">图形验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" cursor-spacing="10" border="none" type="number" maxlength="6"
							placeholder="请输入图形验证码" v-model="form.viewCode" />
						<view class="image-box">
							<image class="codeImg" @tap="getImgCode" :src="codeSrc" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="formInput send-con">
					<view class="label">验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" border="none" :clearable="false" type="number" placeholder="请输入验证码"
							v-model="form.verifyCode" maxlength="6" />
						<u-code change-text="x秒后" ref="uCode" @change="codeChange">
						</u-code>
						<text class="send" @tap="getCode(2)">{{tips}}</text>
					</view>
				</view>
			</view>

			<view class="step2" v-if="stepIndex == 3">
				<text style="margin-bottom: 40upx;">请确保手机号拥有者号与实名信息匹配</text>
				<view class="formInput">
					<view class="label">新的手机号</view>
					<view class="inputBox">
						<u--input class="inputStyle" cursor-spacing="10" border="none" type="number" maxlength="11"
							placeholder="请输入新的手机号" v-model="form.mobile" />
					</view>
				</view>
				<view class="formInput imgCode">
					<view class="label">图形验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" cursor-spacing="10" border="none" type="number" maxlength="6"
							placeholder="请输入图形验证码" v-model="form.viewCode" />
						<view class="image-box">
							<image class="codeImg" @tap="getImgCode" :src="codeSrc" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="formInput send-con">
					<view class="label">验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" border="none" :clearable="false" type="number" placeholder="请输入验证码"
							v-model="form.verifyCode" maxlength="6" />
						<u-code change-text="x秒后" ref="uCode1" @change="codeChange2">
						</u-code>
						<text class="send" @tap="getCode(3)">{{tips2}}</text>
					</view>
				</view>
			</view>

			<view class="step4" v-if="stepIndex == 4">
				<image src="../../static/user/checkPhone.png" mode="widthFix"></image>
				<text>手机号已更换成功</text>
				<text>请使用新的手机号重新登录</text>
			</view>

		</view>
		<view class="submit-bottom" v-if="stepIndex == 1">
			<view class="submit-btn" @tap="stepIndex = 2">更换账号</view>
		</view>

		<view class="submit-bottom" v-if="stepIndex == 2 || stepIndex == 3">
			<view class="submit-btn" @tap="nextChackPhone(stepIndex)">下一步</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getSendPhoneCode,
		sendcheckMobile,
		updateMobile,
		sendPhoneCode
	} from '../../api/user.js'
	import {
		logout,
	} from '@/api/login.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				form: {
					viewCode: "",
					verifyCode: "",
					uid: "",
					mobile: ""
				},
				stepIndex: 1,
				tips: "获取验证码",
				tips2: "获取验证码",
				codeUid: "",
				codeSrc: ""
			}
		},
		onShow() {
			this.getImgCode();
		},
		methods: {
			nextChackPhone(n) { //下一步
				if (n == 2) { //核验
					let obj = this.form;
					if (obj.verifyCode == "") {
						this.$u.toast('请输入短信验证码！');
					} else {
						this.$refs.min_loading.open('正在修改！');
						sendcheckMobile({
							uid: this.codeUid,
							verifyCode: obj.verifyCode,
							viewCode: obj.viewCode,
						}).then(res => {
							if (res.data.success) {
								this.$refs.uToast.show({
									type: 'success',
									message: "核验成功！",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
								this.form = {
									viewCode: "",
									verifyCode: "",
									uid: "",
									mobile: ""
								};
								this.tips = "获取验证码";
								this.getImgCode();
								this.stepIndex = 3;
								this.$refs.uCode.reset();
							} else {
								this.$u.toast(res.data.msg);
							}
						}).finally(() => {
							this.$refs.min_loading.close();
						});
					}
				} else { //新手机号
					let obj = this.form;
					let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (!reg.test(obj.mobile)) {
						this.$u.toast('请正确的手机号！');
					} else if (obj.mobile == this.uerInfo.mobile) {
						uni.$u.toast('您输入的新手机号与原手机号相同！');
						return;
					} else if (obj.verifyCode == "") {
						this.$u.toast('请输入短信验证码！');
					} else {
						this.$refs.min_loading.open('正在修改！');
						updateMobile({
							uid: this.codeUid,
							mobile: obj.mobile,
							verifyCode: obj.verifyCode,
							viewCode: obj.viewCode,
						}).then(res => {
							if (res.data.success) {
								this.$refs.uToast.show({
									type: 'success',
									message: "更换成功,请重新登录！",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
								this.stepIndex = 4;
								setTimeout(() => {
									this.outLogin();
								}, 1500);
							} else {
								this.$u.toast(res.data.msg);
							}
						}).finally(() => {
							this.$refs.min_loading.close();
						});
					}
				}
			},
			// 退出登录
			outLogin() {
				logout().then(res => {
					if (res.data.success) {
						this.$store.dispatch("OutLogin");
						uni.reLaunch({
							url: "/pages/login/login"
						});
					}
				})
			},
			getCode(i) { //获取验证码btn
				if (i == 3) {
					let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (!reg.test(this.form.mobile)) {
						this.$u.toast('请正确的手机号！');
						return;
					} else if (this.form.mobile == this.uerInfo.mobile) {
						uni.$u.toast('您输入的新手机号与原手机号相同！');
						return;
					} else if (this.form.viewCode == "") {
						uni.$u.toast('请输入图形验证码！');
						return;
					}
					console.log(this.$refs.uCode1.canGetCode,'1111');
					// this.getLoginCode(i);
					if (this.$refs.uCode1.canGetCode) {
						this.getLoginCode(i);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					if (this.form.viewCode == "") {
						uni.$u.toast('请输入图形验证码！');
						return;
					}
					// console.log(this.$refs.uCode.canGetCode,'2222')
					if (this.$refs.uCode.canGetCode) {
						this.getLoginCode(i);
						
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			getImgCode() { //获取图形验证码
				this.codeUid = new Date().getTime();
				this.codeSrc = `${this.baseApi}/code/loginCode?uid=${this.codeUid}`;
			},
			getLoginCode(i) { //获取短信验证码
				this.$refs.min_loading.open('正在发送短信验证码');
				if (i == 2) { //核验手机
					getSendPhoneCode({
						mobile: this.uerInfo.mobile,
						uid: this.codeUid,
						viewCode: this.form.viewCode,
					}).then(res => {
						if (res.data.success) {
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.msg);
						}
					}).finally(() => {
						this.$refs.min_loading.close();
					});
				} else { //新手机验证码
					sendPhoneCode({
						mobile: this.form.mobile,
						uid: this.codeUid,
						viewCode: this.form.viewCode,
					}).then(res => {
						if (res.data.success) {
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode1.start();
						} else {
							this.$u.toast(res.data.msg);
						}
					}).finally(() => {
						this.$refs.min_loading.close();
					});
				}
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			codeChange2(text){
				this.tips2 = text;
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
		computed: {
			...mapState(["hasLogin", "uerInfo"]),
		},
		filters: {
			setPhone(data) {
				let phone = "";
				if (data) {
					phone = data.substr(0, 3) + "****" + data.substr(7, 10);
				}
				return phone;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.con-box {
		padding-top: 140upx;
		height: 100%;

		.form {
			height: 100%;
			background-color: #fff;

			.step1 {
				padding-top: 160upx;
				text-align: center;

				text {
					display: block;
					font-size: 24upx;
					color: #666;
				}

				view {
					margin: 30upx 0;
					font-size: 60upx;
					color: #333;
				}

				image {
					width: 160upx;
					margin-bottom: 30upx;
				}
			}

			.step2 {
				padding: 0 58upx;
				padding-top: 200upx;
				
				>.phone {
					margin: 30upx 0;
					font-size: 60upx;
					color: #333;
					text-align: center;
				}
				
				>text {
					display: block;
					font-size: 24upx;
					color: #666;
					text-align: center;
				}
				

				.formInput {
					width: 100%;
					border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
					padding-bottom: 16upx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					color: #333;

					.label {
						font-size: 30upx;
						width: 100%;
						margin-bottom: 26upx;
						margin-top: 26upx;
					}

					.inputBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
					}

					input {
						flex: 1%;
						font-size: 26upx;
						padding-left: 30upx;
						color: #333;
					}
				}
				
				.send-con {
					display: flex;
					align-items: center;
					justify-content: space-between;
				
					.send {
						font-size: 26upx;
						color: #C09B3A;
					}
				}
				
				.imgCode {
					width: 100%;
					position: relative;
					overflow: hidden;
				
					input {
						width: 60%;
					}
				
					.image-box {
						padding: 10upx 10upx 10upx 0;
						position: absolute !important;
						right: 0 !important;
						bottom: 0 !important;
						height: 80upx;
				
						.codeImg {
							height: 100%;
						}
					}
				
				}
			}

			.step4 {
				text-align: center;
				padding-top: 160upx;

				image {
					width: 148upx;
					margin-bottom: 26upx;
				}

				text {
					display: block;
					font-size: 24upx;
					color: #666;
					margin-bottom: 20upx;
				}
			}
		}

		.submit-bottom {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 0 58upx;
			padding-bottom: 100upx;

			.submit-btn {
				width: 100%;
				height: 96upx;
				background: #CEA539;
				border-radius: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}
	}
</style>
